<template>
  <el-dropdown class="logout-dropdown" @command="onMenuSelect">
    <el-button :size="btnSize">
      <template v-if="!Object.getOwnPropertyNames($slots).length">
        <span v-html="user" />
      </template>
      <slot name="user"></slot>
      <i class="el-icon-arrow-down el-icon--right"></i>
    </el-button>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item
        v-for="item of list"
        :key="item.value"
        :command="item.value"
        @click="onLangSelect(item.value)"
      >
        {{ item.label }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  name: "LogouDropdown",
  props: {
    btnSize: {
      type: String,
      default: "mini",
      validator(val) {
        return [undefined, "default", "mini"].includes(val);
      },
    },
    user: {
      type: String,
      default() {
        return this.$t("USER.User");
      },
    },
    list: {
      type: Array,
      default() {
        return [
          {
            value: "logout",
            label: this.$t("USER.Logout"),
          },
        ];
      },
    },
  },
  mounted() {},
  methods: {
    onMenuSelect(selectValue) {
      switch (selectValue) {
        case "logout":
          this.$emit("onLogout");
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.logout-dropdown {
  background: transparent;
  opacity: 0.5;
}
</style>
